<template>
 <div  class="mapContainer">
    <div class="map" id="map"></div>
    <div class="mapDetails" @click="skip">地图详情</div>
    <a-button type="default" @click="test" style="position:absolute;top:20px;right:50px;z-index:99;">周边配置</a-button>
 </div>
</template>
<script>
import BMap from 'BMap'
import BMAP_STATUS_SUCCESS from 'BMAP_STATUS_SUCCESS'
export default {
  name: 'baiduMap',
  components:{},
  data(){
    return {
      map:null,
      position:null,
    }
  },
  created(){},
  mounted(){
   this.$nextTick(()=>{
      this.loadMap()
      this.locate()
   })
  },
  watch:{},
  computed:{},
  methods:{
    loadMap(){
      this.map = new BMap.Map("map"); // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(118.87560894821435, 32.090704575798206 ), 15); // 初始化地图,设置中心点坐标和地图级别  
      this.map.enableScrollWheelZoom(true); 
      this.map.addControl(new BMap.NavigationControl())
    },
    //浏览器定位
    locate(){
        var geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition((r)=>{
          if(geolocation.getStatus() == BMAP_STATUS_SUCCESS){
            this.position=r.point
            console.log(this.position)
            let mk = new BMap.Marker(this.position);
           this.map.addOverlay(mk);
            this.map.panTo(this.position);
           this.$message.success('定位成功',1)
          }
        else {
           this.$message.error('定位失败',1)
             }              
        });
    },
    test(){
     let testpoint={lat: 32.0628,lng: 118.8074}
    let testmarker = new BMap.Marker(testpoint)
           this.map.addOverlay(testmarker);
    },
    skip(){
       window.open("http://map.baidu.com/")
    }
  },
}
</script>
<style lang="scss" scoped> 
      .mapContainer {
        width: 100%;
        height: 100%;
        position: relative;
      .map{
          height: 85%;
          width: 100%;
          position: relative;
      }
      .mapDetails{
        height: 15%;
        width: 100%;
        border: 1px solid rgb(119, 115, 115);
        position: relative;
        font-size: 20px;
        background-color: #ffffff;
      }
  }
     
</style>